<template>
	<view class="wrap" :style="getStyle">
		<u-image
			:src="imageUrl"
			:width="width"
			:height="height"
			:shape="round?'circle':'square'"
			:lazy-load="true"
			:mode="fit"
		>
			<template v-slot:loading>
				<u-loading></u-loading>
			</template>
		</u-image>
	</view>
</template>

<script>
	import {
		uploadMixin
	} from '@/utils/mixins.js';

	export default {
		name: 'onlineCustomImage',
		props: {
			value: {
				type: String
			},
			rowData: {
				type: Object
			},
			src: {
				type: String
			},
			fit: {
				type: String
			},
			align: {
				type: String,
				default: 'left'
			},
			width: {
				type: String
			},
			height: {
				type: String
			},
			radius: {
				type: Number,
				default: 5
			},
			round: {
				type: Boolean,
				default: false
			},
			widget: {
				type: Object
			}
		},
		mixins: [uploadMixin],
		inject: ['form'],
		data() {
			return {
				fileList: []
			}
		},
		methods: {
			isBase64(src) {
				return /^data:image\/\w+;base64,/.test(src);
			}
		},
		computed: {
			getStyle() {
				let temp = 'center';
				switch (this.align) {
					case 'left':
						temp = 'flex-start';
						break;
					case 'right':
						temp = 'flex-end';
						break;
					default:
						temp = 'center';
						break;
				}
				return {
					'justify-content': temp,
					'border-radius': this.radius ? (this.radius + 'px') : undefined
				}
			},
			buildFlowParam() {
				let flowParam = {};
				let flowData = this.form().flowData;
				if (flowData) {
					if (flowData.processDefinitionKey) flowParam.processDefinitionKey = flowData.processDefinitionKey;
					if (flowData.processInstanceId) flowParam.processInstanceId = flowData.processInstanceId;
					if (flowData.taskId) flowParam.taskId = flowData.taskId;
				}

				return flowParam;
			},
			imageUrl() {

				if (Array.isArray(this.fileList) && this.fileList.length > 0) {
					return this.fileList[0].url;
				} else {
					return this.isBase64(this.src) ? this.src : this.getDownloadUrl;
				}
			},
			getDownloadUrl() {
				if (this.value) {
					if (this.widget.relation) {
						return '/admin/online/onlineOperation/downloadOneToManyRelation/' + (this.widget.datasource || {})
							.variableName;
					} else {
						return '/admin/online/onlineOperation/downloadDatasource/' + (this.widget.datasource || {})
							.variableName;
					}
				} else {
					let imgUrl;
					try {
						imgUrl = this.src ? JSON.parse(this.src) : undefined;
						if (imgUrl) {
							imgUrl = this.getUploadFileUrl(imgUrl, {
								filename: imgUrl.filename
							});
						}
					} catch (e) {
						imgUrl = null;
					}
					return imgUrl;
				}
			}
		},
		watch: {
			value: {
				handler(newValue) {
					if (this.widget.column != null) {
						setTimeout(() => {
							this.fileList = [];
							if (newValue) {
								let downloadParams = {
									...this.buildFlowParam,
									datasourceId: (this.widget.datasource || {}).datasourceId,
									fieldName: this.widget.column.columnName,
									asImage: true,
									dataId: this.form().getPrimaryData(this.widget, this.rowData) || ''
								}
								if (this.widget.relation) downloadParams.relationId = this.widget.relation
									.relationId;
								let temp = JSON.parse(newValue);
								temp = Array.isArray(temp) ? temp.map(item => {
									return {
										...item,
										downloadUri: this.getDownloadUrl
									}
								}) : [];
								this.fileList = this.parseUploadData(JSON.stringify(temp), downloadParams);
							}
						}, 30);
					}
				},
				immediate: true
			}
		}
	}
</script>

<style scoped lang="less">
	.wrap {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
</style>